<template>

    <div id="population" class="population">

    </div>
</template>

<script>
export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chart = this.$echarts.init(document.getElementById('population'));
            const options = {
                series: [
                    {
                        type: 'gauge',
                        axisLine: {
                            lineStyle: {
                                width: 9,
                                color: [
                                    [0.2, '#67e0e3'],
                                    [0.8, '#37a2da'],
                                    [1, '#fd666d']
                                ]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -9,
                            length: 9,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        splitLine: {
                            distance: -40,
                            length: 30,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        axisLabel: {
                            color: 'auto',
                            distance: 30,
                            fontSize: 9,

                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value} %',
                            color: 'auto',
                            fontSize: 20,


                        },
                        data: [
                            {
                                name: '人口通电率',
                                value: 95.907,
                                title: {
                                    show: true,
                                    color: '#999',
                                    offsetCenter: [0, '-35%'],
                                    fontSize: 20,
                                    fontStyle: 'italic'
                                }
                            }
                        ]
                    }
                ]
            };
            chart.setOption(options);
            window.onresize = function () {
                chart.resize()
            }
        }
    },
}
</script>

<style lang="less" scoped>
.population {

    padding-left: 5px;
    width: 390px;
    height: 236px;
    background-color: #fff;
}
</style>